import React, {
  memo,
  useReducer,
  // useState
} from 'react'

function reducer(state, action) {
  switch (action.type) {
    case 'incrememt':
      return { ...state, counter: state.counter + 1 }
    case 'decrememt':
      return { ...state, counter: state.counter - 1 }
    case 'add_number':
      return { ...state, counter: state.counter + action.num }
    case 'sub_number':
      return { ...state, counter: state.counter - action.num }
    default:
      return state
  }
}

export default memo(function App() {
  // const [count, setCount] = useState(0)
  const [state, dispatch] = useReducer(reducer, {
    counter: 0,
    friend: [],
    user: [],
  })

  return (
    <div>
      {/* <h1>App Page count: {count}</h1>
      <button onClick={(e) => setCount(count + 1)}>+1</button>
      <button onClick={(e) => setCount(count - 1)}>-1</button>
      <button onClick={(e) => setCount(count + 5)}>+5</button>
      <button onClick={(e) => setCount(count - 5)}>-5</button>
      <button onClick={(e) => setCount(count + 100)}>+100</button> */}

      <h1>App Page count: {state.counter}</h1>
      <button onClick={(e) => dispatch({ type: 'incrememt' })}>+1</button>
      <button onClick={(e) => dispatch({ type: 'decrememt' })}>-1</button>
      <button onClick={(e) => dispatch({ type: 'add_number', num: 5 })}>
        +5
      </button>
      <button onClick={(e) => dispatch({ type: 'sub_number', num: -5 })}>
        -5
      </button>
      <button onClick={(e) => dispatch({ type: 'add_number', num: 100 })}>
        +100
      </button>
    </div>
  )
})
